<template>
  <div class="message-page" >
    <template v-if="messageList && messageList.length">
      <div
        class="item-box"
        v-for="(item, index) in messageList"
        :key="index"
        @click="handleMessage(item)">
        <img v-if="item.is_read" class="icon" src="https://www.thuguardian.com/files/small_program/message-read.png" alt="">
        <img v-else class="icon" src="https://www.thuguardian.com/files/small_program/message-unread.png" alt="">
        <div class="content">
          <div class="title suspe">{{ item.title }}</div>
          <div class="time">{{ item.create_at }}</div>
          <div class="detail suspe">{{ item.content }}</div>
        </div>
      </div>
    </template>
    <div v-else class="empt-box">
      <img src="https://www.thuguardian.com/files/small_program/empty.png" alt="">
      <div class="font">暂无消息</div>
    </div>
  </div>
</template>

<script>
  import { messageList } from '@/api/message/index.js'

  export default {
    components: {},
    data() {
      return {
        token: '',
        filterForm: {
          page: 1
        },
        isMore: true,
        messageList: []
      };
    },
    onShow() {
      this.token = wx.getStorageSync('token');
      this.getList()
    },
    methods: {
      goLogin() {
        wx.navigateTo({
          url: '/pages/login/main'
        })
      },
      async getList () {
        const res = await messageList(this.filterForm)
        if (res.code == 200) {
          if (this.filterForm.page == 1) {
            this.messageList = res.data
          } else {
            this.messageList = this.messageList.concat(res.data)
          }
          this.isMore = this.messageList?.length < res.total ? true : false
        }
      },
      handleMessage (item) {
        uni.navigateTo({ url: `/pages/message-detail/main?id=${item.id}` });
      }
    },
    onReachBottom() {
      console.log(this.isMore, 'this.isMorethis.isMore')
      if (this.isMore) {
        return
      }
      this.filterForm.page++
      this.getList()
    }
  };
</script>

<style lang="less">
  .message-page {
    padding: 24px 30px;
    margin-bottom: env(12px + safe-area-inset-bottom);
    background: #fff;
    .item-box {
      display: flex;
      padding: 16px 0;
      width: 100%;
      border-bottom: 1px solid #F3F3F3;
      .icon {
        display: block;
        width: 28px;
        height: 28px;
      }
      .content {
        margin-left: 12px;
        width: calc(100% - 40px);
        .title {
          font-size: 20px;
          line-height: 28px;
          color: rgba(0, 0, 0, .85);
        }
        .time {
          margin-top: 4px;
          font-size: 16px;
          line-height: 23px;
          color: rgba(0, 0, 0, .45);
        }
        .detail {
          margin-top: 8px;
          font-size: 18px;
          line-height: 28px;
          color: rgba(0, 0, 0, .65);
        }
      }
    }
  }

  
// 污无数据
.empt-box {
  margin: 0 auto;
  margin-top: 40%;
  width: 100%;
  img {
    display: block;
    margin: 0 auto;
    width: 80px;
    height: 80px;
  }

  .font {
    margin-top: 16px;
    width: 100%;
    text-align: center;
    font-size: 18px;
    line-height: 23px;
    color: rgba(0, 0, 0, .45);
  }
}
</style>
